<!--评审结果统计分析-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div style="display: flex;">
        <div class="search-container-item right16">
          <div class="item-name">课题类别：</div>
          <el-select v-model="dataForm.name" placeholder="请选择" style="width: 110px" size="mini" @change="getNextStep">
            <el-option v-for="item in type1" :key="item.subCategoryId" :label="item.subCategoryName" :value="item.subCategoryId"></el-option>
          </el-select>
        </div>
        <div class="search-container-item right16">
          <div class="item-name">课题活动：</div>
          <el-select v-model="dataForm.subActivityId" placeholder="请选择" style="width: 110px" size="mini" @change="getNextStep1">
            <el-option v-for="item in type2" :key="item.subActivityId" :label="item.subActivityName" :value="item.subActivityId"></el-option>
          </el-select>
        </div>
        <div class="search-container-item right16">
          <div class="item-name">课题所属阶段：</div>
          <el-select v-model="dataForm.acScsId" placeholder="请选择" style="width: 110px" size="mini" @change="getNextStep2">
            <el-option v-for="item in type3" :key="item.acScsId" :label="item.acScsName" :value="item.acScsId"></el-option>
          </el-select>
        </div>
        <div class="search-container-item right16">
          <div class="item-name">课题所属流程：</div>
          <el-select v-model="dataForm.acScsFlowId" placeholder="请选择" style="width: 110px" size="mini">
            <el-option v-for="item in type4" :key="item.acScsFlowId" :label="item.acScsFlowName" :value="item.acScsFlowId"></el-option>
          </el-select>
        </div>
        <div class="search-button color-primary width70" @click="getList">
          <img src="../../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
      <div class="search-button btn1 width70" @click="releaseBtn">
          <span>发布</span>
       </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="courseName" label="序号" align="center" width="55">
          <template slot-scope="scope">
            {{scope.$index + 1 + (parseInt(dataForm.pageNo) - 1) * 50  }}
          </template>
        </el-table-column>
        <el-table-column prop="fillSubjectName" label="课程名称" align="center" min-width="130"> </el-table-column>
        <el-table-column prop="subCategoryName" label="课题类别" align="center" min-width="130"></el-table-column>
        <el-table-column prop="examTypeName" label="评审的课题阶段/流程" align="center" min-width="200">
          <template slot-scope="scope">{{scope.row.currentStageName +' / '+scope.row.currentFlowName}}</template>
        </el-table-column>
        <el-table-column prop="subjectLeaderName" label="课题负责人" align="center" min-width="130"> </el-table-column>
        <el-table-column prop="dept" label="部职别" align="center" min-width="130"></el-table-column>
        <el-table-column prop="researchContent" label="研究内容" align="center" min-width="200"></el-table-column>
        <el-table-column prop="reviewDate" label="评审时间" align="center" min-width="200"></el-table-column>
        <el-table-column prop="expertName" label="评审专家" align="center" min-width="130"> </el-table-column>
        <el-table-column prop="excellentLine" label="评审材料" align="center"  min-width="230">
          <div slot-scope="scope" class="flex">
            <span>11111</span>
            <span class="small-btn color-yellow" @click="downloadFile(scope.row)">
              <img src="../../../../assets/assessment/icon-import.png"> 下载材料
              </span>
          </div>
        </el-table-column>
        <el-table-column prop="score" label="综合评审分数" align="center"  min-width="200"></el-table-column>
        <el-table-column prop="examStatisticsVO" label="专家评审意见" align="center"  min-width="200">
          <template slot-scope="scope">
            <span class="small-btn color-primary" style="width:90px" @click="detail(scope.row)">
              <img src="../../../../assets/assessment/icon-look.png"> 详情
              </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="export-button" @click="importExcel">
      <img src="../../../../assets/assessment/icon-export.png" alt="" />
      <span>导出Excel</span>
    </div>
    <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.pageNo-1)*50 == 0?1:(dataForm.pageNo-1)*50}}-{{total>50?dataForm.pageNo*50:total}}条</h1>
    <div class="pagination-block">
        <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- 详情 -->
    <detailDialog ref="detailDialog" title="专家评审意见详情" :currentFlow="currentFlow" :currentStage="currentStage" :fillId="fillId"></detailDialog>
  </div>
</template>

<script>
import {resultPS,getTypeActivityList,sbJDList,getTypeActivityLC,release} from "@/api/teachingTopic";
import detailDialog from '../../activity/declareDetail'
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
      dataForm:{
        name:'',
        acScsFlowId:'',//课题活动流程ID
        acScsId:'',//课题活动阶段ID
        acScsOrder:'',//课题活动阶段ID序号
        pageNo:1,
        pageSize:50,
        subActivityId:'',//课题活动ID
      },
      type1:[],
      type2:[],
      type3:[],
      type4:[],
      detailData:[],
      detailDialog:false,
      total:1,
      tableData: [],
      gradeList:[],
      IDS:[],
      fillId:'',
      currentFlow:'',
      currentStage:''
    };
  },
  components:{detailDialog},
  mounted(){
    this.commonApi.getAllType({}).then(res=>{
      this.type1 = res.data
    })
    this.getList();
  },
  methods: {
    handleSelectionChange(e){
      this.IDS = e.map(item=>item.fillId)
    },
    currentPage(e){
      this.dataForm.pageNo = e;
      this.getList()
    },
    async getNextStep(e){
      let res = await getTypeActivityList({subCategoryId:e});
      this.type2 = res.data;
      this.type3 = [];
      this.type4 = []
    },
    async getNextStep1(e){
      let res = await sbJDList({subActivityId:e})
      this.type3 = res.data;
      this.type4 = []
    },
    async getNextStep2(e){
      this.dataForm.acScsOrder = this.type3.filter(item=>item.acScsId == e)[0].acScsOrder
      let res = await getTypeActivityLC({acScsId:e,subActivityId:this.dataForm.subActivityId})
      this.type4 = res.data
    },
    async getList(){
      let res = await resultPS(this.dataForm)
      this.tableData = res.data.records
      this.total =  res.total
    },
    async releaseBtn(){
      let res = await release(this.IDS);
      if(res.code == 200){
        this.getList();
        this.$message.success('发布成功！')
      }
    },
    detail(row){
      this.fillId = row.fillId;
      this.currentFlow = row.currentFlow;
      this.currentStage = row.currentFlow;
      this.$refs.detailDialog.psDialog = true
    },
    //导出
    importExcel(){
      Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+'/reviewResult/export',
          params:this.dataForm,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
      }).then(res => {
          fileDownload(res.data, '评审结果统计分析.xlsx');
      }); 
    },
    // 下载
    downloadFile(){
      Axios({
        method: 'get',
        url: this.$store.state.studentUrl.baseUrl+'/fillSubject/downLoadFillAttr',
        params:this.dataForm,
        headers: {'Content-Type': 'application/octet-stream' },
            responseType: 'blob'
      }).then(res => {
          fileDownload(res.data, '评审材料.xlsx');
      }); 
    },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/ .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.search-container {
  justify-content: space-between !important;
  align-items: center;
}
.right16{margin-right: 16px;}
.width70{width: 70px}
.width80{width: 90%;margin:20px auto 40px}
.item-name {
  color: #004ca7;
}
.btn1{
    color: #F3B815;
    border: 1px solid #F3B815;
    background: #FFF6EF;
}
.color-yellow{
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
    width: 114px;
}
.flex{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  .small-btn{
    flex-shrink: 0;
    margin: 0 0 0 22px;
  }
}
</style>
